<template>
  <a-layout>
    <a-layout-header class="header">
      <div class="header-wrap">
        <div class="header-logo" :class="{ coll: collapsed }">
          <img src="@/assets/logo1.svg" alt="" srcset="">
          <h1 class="text-white" v-if="!collapsed">{{ $t('all.autotext198') }}</h1>
        </div>
        <div class="heard-content">
          <div class="left-content">
            <a-space size="large">
              <a-icon
                v-if="!hideMenu"
                :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                class="text-white"
                style="display: block;font-size: 18px;"
                @click="handleCollapse"
              />
              <a-button
                v-if="isPm && navSite"
                icon="home"
                ghost
                @click="backHome"
              >
                {{ $t('all.autotext491') }}
              </a-button>
              <a-select
                v-model="projectCheck"
                class="project-select"
                v-if="navShow && navSite && projectList.length>1"
                @change="handleChange"
              >
                <a-select-option v-for="item in projectList" :key="item.id" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-space>
          </div>
          <right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" />
        </div>
      </div>
    </a-layout-header>
    <div class="layout-main">
      <div class="sider" :class="{ coll: collapsed, hide: hideMenu }">
        <siderMenu ref="menuRef"></siderMenu>
      </div>
      <div class="content">
        <bread-crumb></bread-crumb>
        <div class="content-main">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive" />
        </div>
        <global-footer />
      </div>
    </div>
  </a-layout>
</template>

<script>
import { mapState } from 'vuex'
import { i18nRender } from '@/locales'
import { CONTENT_WIDTH_TYPE, SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE, CURRENT_PROID } from '@/store/mutation-types'

import defaultSettings from '@/config/defaultSettings'
import RightContent from '@/components/GlobalHeader/RightContent'
import GlobalFooter from '@/components/GlobalFooter'
import siderMenu from './components/siderMenu'
import { getUnread } from '@/api/system/message'

export default {
  name: 'BasicLayout',
  components: {
    RightContent,
    GlobalFooter,
    siderMenu
  },
  data () {
    return {
      multiTab: defaultSettings.multiTab,
      // preview.pro.antdv.com only use.
      isProPreviewSite: process.env.NODE_ENV !== 'development',
      // end
      isDev: process.env.NODE_ENV === 'development',
      fixedHeader: defaultSettings.fixedHeader, // sticky header
      title: defaultSettings.title,
      settings: {
        // 布局类型
        layout: defaultSettings.layout, // 'sidemenu', 'topmenu'
        // CONTENT_WIDTH_TYPE
        contentWidth: defaultSettings.layout === 'sidemenu' ? CONTENT_WIDTH_TYPE.Fluid : defaultSettings.contentWidth,
        // 主题 'dark' | 'light'
        theme: defaultSettings.navTheme,
        // 主色调
        primaryColor: defaultSettings.primaryColor,
        fixedHeader: defaultSettings.fixedHeader,
        fixSiderbar: defaultSettings.fixSiderbar,
        colorWeak: defaultSettings.colorWeak,

        hideHintAlert: false,
        hideCopyButton: false
      },
      // 媒体查询
      query: {},

      // 是否手机模式
      isMobile: false,
      projectList: JSON.parse(localStorage.getItem('CURRENT_PROJECT_LIST')) || [],
      projectCheck: localStorage.getItem('CURRENT_PROID') ? parseInt(localStorage.getItem('CURRENT_PROID')) : null
    }
  },
  computed: {
    ...mapState({
      collapsed: state => state.app.sideCollapsed
    }),
    hideMenu () {
      return [
        '/high',
        '/site'
      ].includes(this.$route.path) && !this.$store.getters.userInfo.isAdmin || this.$route.meta.menuHidden
    },
    navSite () {
      return ![
        '/site'
      ].includes(this.$route.path)
    },
    navShow () {
      if (this.$store.getters.roles.length > 0) {
        return !['SYS_ADMIN', 'PROJECT_ADMIN', 'SYS_FINANCE', 'SYS_BIZ'].includes(this.$store.getters.roles[0].code)
      } else {
        return !['SYS_ADMIN', 'PROJECT_ADMIN', 'SYS_FINANCE', 'SYS_BIZ'].includes(localStorage.getItem('CURRENT_ROLECODE'))
      }
    },
    isPm () {
      if (this.$store.getters.roles.length > 0) {
        return ['PM'].includes(this.$store.getters.roles[0].code)
      } else {
        return ['PM'].includes(localStorage.getItem('CURRENT_ROLECODE'))
      }
    }
  },
  created () {
    // 处理侧栏收起状态
    this.$watch('collapsed', () => {
      this.$store.commit(SIDEBAR_TYPE, this.collapsed)
    })
    this.$watch('isMobile', () => {
      this.$store.commit(TOGGLE_MOBILE_TYPE, this.isMobile)
    })
  },
  methods: {
    i18nRender,
    handleCollapse () {
      this.$store.commit(SIDEBAR_TYPE, !this.collapsed)
    },
    handleChange (e) {
      this.projectCheck = e
      this.$store.commit(CURRENT_PROID, e)
      const record = this.projectList.filter(item => item.id === e)[0]
      this.$store.dispatch('EnterProject', record).then(res => {
        if (this.$route.name === 'high') {
          this.$store.dispatch('GetInfo', e).then((menus, pms) => {
            this.$store.dispatch('GenerateRoutes', menus).then(() => {
              // 根据roles权限生成可访问的路由表
              // 动态添加可访问路由表
              this.$router.addRoutes(this.$store.getters.addRouters)
              this.$refs.menuRef.getMenu()
              this.$globalVue.$emit('reloadHighAll')
            })
          })
        }

        this.$router.push({ name: 'high' })

        getUnread({ proId: e }).then(res => {
          this.$globalVue.$emit('unReadMsgCount', res)
        })
      })
    },
    backHome () {
      this.$router.push({ path: '/overview/all' })
    }
  }
}
</script>

<style lang="less" scoped>
@import './BasicLayout.less';
.header {
  height: 50px !important;
  padding: 0 !important;
  background: @primary-color;
  box-shadow: 0 0 10px #eee !important;
  position: relative;
  z-index: 100;
  .header-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-logo {
      // width: 200px;
      padding-left: 28px;
      display: flex;
      align-items: center;
      // justify-content: center;
      transition: width 0.3s;
      &.coll {
        width: 80px;
      }
      img {
        width: 24px;
        height: 24px;
      }
      h1 {
        margin: 0 0 0 12px;
        font-size: 18px;
        font-weight: 500;
      }
    }
    .heard-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
    }
  }
}
.layout-main {
  display: flex;
}
.sider {
  flex: none;
  width: 180px;
  background: #fff;
  height: calc(100vh - 50px);
  overflow-y: auto;
  transition: width 0.3s;
  &.coll {
    width: 80px;
  }
  &.hide {
    width: 0;
    overflow: hidden;
  }
}
.content {
  flex: 1;
  height: calc(100vh - 50px) !important;
  overflow: auto;
  .content-main {
    padding: 15px;
    min-height: calc(100vh - 260px);
  }
}
/deep/.project-select {
  width: 400px;
}
</style>
